<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Register</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all">
</head>
<body>
<ul class="layui-nav">
    <li class="layui-nav-item"><a href="">Spring Security Demo</a></li>
    <li class="layui-nav-item layui-this">
        <a href="javascript:;">Return</a>
        <dl class="layui-nav-child">
            <dd><a th:href="@{/home}">Home</a></dd>
            <dd><a th:href="@{/login}">Login</a></dd>
        </dl>
    </li>
</ul>

<p class="layui-elem-quote">注册</p>

<div class="layui-form" id="registerApp">
    <div class="layui-form-item">
        <label class="layui-form-label">UserName</label>
        <div class="layui-input-block">
            <input type="text" name="userName" lay-verify="required" autocomplete="off" placeholder="请输入用户名"
                   class="layui-input" v-model="form.userName"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">Password</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="required" placeholder="请输入" autocomplete="off"
                   class="layui-input" v-model="form.password"/>
        </div>
    </div>
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
        <div>
            <button class="layui-btn layui-btn-primary cap-register" v-on:click="doRegister">注册</button>
        </div>
    </fieldset>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script th:src="@{/plugins/layui/layui.js}"></script>

<script>
    layui.use(["layer","element"], function () {
        var element = layui.element;
        //监听导航菜单的点击
        element.on("nav(return)",function(elem){
            elem.show();
        })
    });

    //DOM控制
    var vm = new Vue({
        el: "#registerApp",
        data: {
            form: {
                userName: "u1",
                password: "12345"
            },
            constant: {
                registerUrl: "/authServer/user/register"
            }
        },
        methods: {
            doRegister() {
                layer.msg("注册中...");
                //发送get请求
                this.$http.post(this.constant.registerUrl, JSON.stringify(this.form), {emulateJSON: true}).then(function (res) {
                    layer.msg(res.body.msg);
                    if ("0" == res.body.code) {
                        window.location.href = "/authServer/"
                    }
                }, function () {
                    layer.msg('请求失败处理');
                });

            }
        }
    });
</script>


</body>
</html>